
<template>
    <!-- 
        确定动态的 属性
            1. id => echarts 的容器
            2. 自己定义一个动态的属性， bar = 2
     -->     

     <div class="bar" :id="echartsid" :style="{ width: 600 + 'px', height: 400 + 'px' }">
     </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, watch, ref } from 'vue'
//  echarts 图表，本质是生成dom

// 接收一个父组件传递的数据
let props: any = defineProps({
echartsList: {   // 这个是异步数据
    type: Object,
},
echartsid: {  // 这个是默认数据， 是可以直接使用的（同步）
    type: String,
    default: 'bar'
},
echartsLine: {  //默认的数据
    type: Number || String,
    default: 1
},
tooltip:{
    type:Boolean,
    default: false        
}
})


watch(() => props, (newVal: any) => {
// console.log(newVal, 22222);
// 创建（绘画）图表   =》 需要用一个方法
getEchartT(newVal.echartsList)
}, {
deep: true
})

let echartsDom: any = ref('')
// 配置图表信息
const getEchartT = (obj: any) => {
// console.log(obj,55566);
let option = {  // echarts属性
    xAxis: {
        type: 'category',
        data: obj.xdata
    },
    yAxis: {
        type: 'value',
        splitLine: {   //背景设置成虚线
            show: true,
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    tooltip: {
        trigger: props.tooltip?'item':'axis',
        axisPointer: {
            type: 'line',  // shadow  line  cross
            label: {
                // backgroundColor: 'pink',
                show: true,
            }
        },
        showContent:true
    },
    series: [
        {
            data: obj.list,
            type: 'line',
            showBackground: true,
        },{
            data: [110,80,91,76,120,110,78,95],
            type: 'line',
            showBackground: true,
        },
        // 第二条数据
        props.echartsLine == 2 ? getLine(obj.list1) : ''    // 如果=2，就添加一组数据
    ]
};
echartsDom.value.setOption(option);  // 然后这里就是在dom结构里添加数据
}

onMounted(() => {  //组件的生命周期 =》 组件创建 执行一次
echartsDom.value = echarts.init(document.getElementById(props.echartsid));  
//组件一创建，此dom结构也创建了
// 这个dom结构就是 放echarts 的容器 
})

const getLine = (list: any) => {  //  规定形参的类型
return {
    name: 2012,
    type: 'line',
    // data: [120, 200, 150, 80, 170, 110, 130,100],
    data: list
}
}
</script>

<style></style>